<template>
  <div class="header">
    <div id="headLeft">抒</div>
    <div id="headmiddle">
      <router-link id="mid1" to="/">博客首页</router-link>
      <router-link id="mid1" to="/happyroot">快乐星球</router-link>
      <a-auto-complete
        v-model:value="value"
        :options="options"
        style="width: 200px"
        placeholder="请输入想搜索的内容"
        @keyup.enter="onSelect()"
      />
    </div>
    <div id="headright">
      <vonLogon v-if="loginType"></vonLogon>
      <vLogin v-else></vLogin>

      <a-dropdown>
        <template #overlay>
          <a-menu @click="handleMenuClick">
            <a-menu-item key="1">
              <WalletOutlined />
              写文章
            </a-menu-item>
            <a-menu-item key="2">
              <SendOutlined />
              发动态
            </a-menu-item>
          </a-menu>
        </template>
        <a-button>
          创作中心
          <DownOutlined />
        </a-button>
      </a-dropdown>
    </div>
  </div>
  <router-view></router-view>
</template>

<script>
import { defineComponent, ref, computed } from "vue";
import {
  WalletOutlined,
  SendOutlined,
  DownOutlined,
} from "@ant-design/icons-vue";
import vLogin from "./components/login/Login";
import vonLogon from "./components/login/Onlogin";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { message } from "ant-design-vue";
// showSearch

export default defineComponent({
  setup() {
    const store = useStore();
    const router = useRouter();
    const value = ref("");
    const options = ref([]);

    const onSelect = () => {
      // console.log(value.value);
      // router.push({ path: "/searchPage" });
      message.info("搜索功能有待开发哦")
    };

    const handleMenuClick = ({ key }) => {
      if (key == 1) {
        router.push({ path: "/create", query: { id: "sub1" } });
      } else {
        router.push({ path: "/create/createM", query: { id: "sub2" } });
      }
    };

    return {
      handleMenuClick,
      loginType: computed(() => store.state.a.loginType),
      value,
      options,
      onSelect,
    };
  },

  components: {
    WalletOutlined,
    SendOutlined,
    DownOutlined,
    vLogin,
    vonLogon,
  },
});
</script>

<style socped>
.header {
  width: 100%;
  height: 54px;
  background: #e6f7ff;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#headLeft {
  padding-left: 20px;
  font-size: 30px;
  font-family: 华文行楷;
}
#mid1 {
  padding-right: 20px;
}
#headright {
  padding-right: 20px;
}
</style>